<template>
	<view class="order">
		<mx-navbar :title="'我的优惠券'" :background="'#fff'" text_color="#000"></mx-navbar>

		<view class="nav-tab">
			<view class="tab-box">
				<view class="tab-item" :class="{ 'act-item': state == item.id }" v-for="(item, index) in tabsTag"
					:key="index" @click="tabsChange(item.id)">
					{{ item.name }}
					<view class="tab-line" v-if="state == item.id" />
				</view>
			</view>
		</view>

		<view class="cp-module" v-if="cp_list && cp_list.length > 0">
			<coupon-com :coupon="item" v-for="(item, index) in cp_list" :key="index" />
		</view>

		<view class="c-empty" v-else>
			<mx-empty txt="暂无优惠券"></mx-empty>
		</view>
	</view>
</template>

<script setup>
import couponCom from './com/coupon.vue'

const { proxy } = getCurrentInstance()

const data = reactive({
	tabsTag: [{
		id: 1,
		name: "待使用",
	},
	{
		id: 2,
		name: "已使用",
	},
	{
		id: 3,
		name: "已作废",
	}
	], // 状态栏
	state: 1,
	cp_list: [],

})
const {
	tabsTag,
	state,
	cp_list
} = toRefs(data)

const tabsChange = (val) => {
	data.state = val
	getList()
}

onLoad((options) => {
	data.state = options.state || 1
})

onShow(() => {
	getList()
})

async function getList() {
	let res = await proxy.$api('UserCouponList', {
		state: data.state
	})
	if (res.code === 0) {
		data.cp_list = res.data || []
	}
}


</script>

<style lang="scss" scoped>
.order {
	min-height: 100vh;
	background: $bg_color;

	.nav-tab {
		width: 100%;
		position: fixed;
		z-index: 9;
		background: #ffffff;

		.tab-box {
			width: 100%;
			height: 80rpx;
			display: flex;

			.tab-item {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				position: relative;

				.tab-line {
					width: 60rpx;
					height: 8rpx;
					border-radius: 8rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -30rpx;
					background: $main_color;
				}
			}

			.act-item {
				color: $main_color;
			}
		}
	}


	.c-empty {
		width: 100%;
		height: 60vh;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999;
	}

	.cp-module {
		padding: 100rpx 24rpx 24rpx;
	}

}
</style>